<template>
	<view class="content">
		<view class="top">
			<view class="paymoney" v-if="type == 1">
				<view class="sign iconfont">&#xe604;</view>
				<view class="money">{{money}}</view>
			</view>
			<view class="payInput" v-if="type == 2">
				<view class="sign iconfont">&#xe604;</view>
				<view class="money">
					<input class="input" type="digit" placeholder="请输入充值金额" v-model="money" placeholder-class="pla" />
				</view>
			</view>
		</view>
		
		<view class="group">
			<view class="grouplist">
				<radio-group @change="radioChange">
					<label class="uni-list-cell" v-for="(item, index) in items" :key="index">
						<view class="uni_name">
							<image class="uni_icon" :src="item.image" mode=""></image>
							<view class="uni_detail">{{item.name}}</view>
						</view>
						<view>
							<radio :value="item.value" class="radio" color="#E42221" />
						</view>
					</label>
				</radio-group>
			</view>
			
		</view>
		<view class="bottom">
			<view class="submit" @click="goRecharge">立即支付</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items:[
					{
						value: '1',
						name: '支付宝',
						checked: 'true',
						image:'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/alipay.png'
					},
					{
						value: '2',
						name: '微信',
						image:'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/wxpay.png'
					}
				],
				money:'',
				type:'',
				payType:''
			}
		},
		onLoad(options) {
			console.log(options)
			if (options.money != undefined) {
				this.money = options.money;
			} else {
				this.money = ''
			}
			this.type = options.type;
			
		},
		methods: {
			
			radioChange: function (e) {
				console.log(e)
				this.payType = e.detail.value;
			},
			// 立即支付
			goRecharge: function () {
				let that = this;
				console.log(that.money)
				if (that.money == '') {
					that.tui.toast('请输入充值金额')
					return
				} else if (that.payType == '') {
					that.tui.toast('请选择支付方式')
					return
				}
				that.api.userToRecharge({
					money:that.money,
					type:that.payType
				}).then(res => {
					console.log(res,"充值------")
					// that.tui.toast(res.msg)
					console.log(that.payType)
					if (that.payType == 1) { //支付宝
						let orderInfo = res.data.data.body;
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: orderInfo, //微信、支付宝订单数据
							success(res) {
								that.tui.toast('支付成功')
								setTimeout(function() {
									that.cacheHelper.updateUserInfo()
									uni.$emit('login',{msg:'页面更新'})
								}, 500)
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									});
								}, 1500)
							},
							fail(err) {
								that.tui.toast(err)
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									});
								}, 500)
							}
						});
						
					} else if (that.payType == 2) { //微信
						let datas = JSON.parse(res.data.data);
						let orderInfo = datas.weixin;
						console.log(orderInfo,"orderInfo----")
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: orderInfo, //微信、支付宝订单数据
							success(res) {
								that.tui.toast('支付成功')
								setTimeout(function() {
									that.cacheHelper.updateUserInfo()
									uni.$emit('login',{msg:'页面更新'})
									
								}, 500)
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									});
								}, 1500)
							},
							fail(err) {
								that.tui.toast(err)
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									});
								}, 500)
							}
						});
						
						
					}
					
					
					
				})
				
				
				
			}
		},
		// 监听返回按钮
		onBackPress(e) {
			console.log(e)
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		background: #FFFFFF;
		font-family: PingFang SC;
		font-size: 32rpx;
		color: #333333;
		padding: 30rpx;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
	}
	.top {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		.paymoney {
			width: 418rpx;
			line-height: 100rpx;
			margin: 20rpx auto 30rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 80rpx;
			color: #333333;
			font-weight: bold;
			.sign {
				font-size: 40rpx;
				padding-top: 15rpx;
				color: #FFDA71;
			}
		}
		.payInput {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 60rpx;
			color: #333333;
			.sign {
				font-size: 40rpx;
			}
			.money {
				width: calc(100% - 80rpx);
				box-sizing: border-box;
				padding-left: 15rpx;
				text-align: left;
				.pla {
					color: #999999;
					font-size: 40rpx;
				}
			}
			
		}
		
		
		
		
	}
	
	.group {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 0 180rpx 0;
		.grouplist {
			width: 100%;
			box-sizing: border-box;
			.uni-list-cell {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 80rpx;
				padding: 30rpx 0;
				.radio {
					transform: scale(0.8);
				}
				.uni_name {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.uni_icon {
						width: 50rpx;
						height: 50rpx;
					}
					.uni_detail {
						padding-left: 22rpx;
					}
					
				}
				
				
			}
			
			
			
		}
	}
	.bottom {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 0rpx 50rpx;
		margin-top: 200rpx;
		.submit {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			background: #E42221;
			border-radius: 8rpx;
			line-height: 94rpx;
		}
	}

</style>
